class Index {
  constructor() {
    // this.getGoods();
    this.ajax();
  }
  ajax() {
    // 1 调用ajax发送数据
    let xhr = new XMLHttpRequest();
    xhr.open('post', './data/index.php');
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.send();
    // 2 接收结果进行提示
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        let str = xhr.responseText;
        str = JSON.parse(str);
        this.getGoods(str.data);
        // console.log(str);
      }
    }
  }
  /**********渲染页面的数据*******/
  // 需求:页面加载进来,就要渲染数据
  getGoods(data) {
    let str = '';
    data.forEach(ele => {
      // console.log(ele);
      //1 获取对象中的name,img,price等数据
      let {
        id,
        img,
        price,
        name
      } = ele;
      // 2 拼接到html中
      str += `<a href="proDetail.html">
      <dl><dt><span class="abl"></span><img src="${img}" />
      <span class="abr"></span></dt><dd>${name}</dd>
      <dd><span>￥${price}</span></dd></dl></a>`;
    }); 
    // console.log(str,$('.pList'));
    // 3 将拼接的数据追加到页面中
    $('.pList').html(str);
  }
}
let indexData = new Index();